<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="view">
			<scroll-view @scrolltolower="lowerBottom" class="box_scroll" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" :refresher-threshold="50" refresher-background="#f8f8f8"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore">
				<view class="box_list_noData" v-if="productList.length == 0 && !downRefresh">
					<image class="noData_img"
						src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753765605533_4b17a9fa/icon_zanwushuju.png?x-oss-process=image/resize,w_300"
						mode="" />
					<view class="noData_text">
						暂无数据
					</view>
				</view>
				<view class="items" v-for="(item, index) in productList" :key="index">
					<view class="header">
						<view class="title">{{ item.name }}</view>
						<!-- <view :class="item.falg ? 'red' : ''"></view> -->
					</view>
					<view class="bottom">
						<view class="answer">您的答案是：{{ item.type != '多选' ? item.userAnswer : '' }}
							{{ item.userAnswerOption || '' }}</view>
						<view class="date">{{ item.createTime }}</view>
					</view>
				</view>
				<u-loadmore v-if="productList.length != 0" fontSize="25" :status="status" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getIncorrect,
		getHistory
	} from '@/api/index.js'
	import {
		systemInfo
	} from '../../utils/mixin'
	export default {
		components: {},
		mixins: [systemInfo],
		data() {
			return {
				productList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				status: 'loadmore',
				triggered: false,
				downRefresh: false,
				pageCount: 0,
			}
		},
		onLoad() {
			// 状态栏高度
			this.getSystemInfo();
		},
		onShow() {
			this.downRefresh = true
			this.shopList()
		},
		methods: {
			//触底加载
			lowerBottom() {
				if (this.queryParams.pageNum < this.pageCount) {
					if (!this.downRefresh) {
						this.downRefresh = true
						this.status = 'loading';
						this.queryParams.pageNum += 1
						this.shopList()
					}
				}
			},
			onRefresh() {
				this.triggered = true;
				this.downRefresh = true
				this.queryParams.pageNum = 1
				this.productList = []
				this.shopList()
			},
			onRestore() {
				this.triggered = false; // 需要重置
			},



			// 错题
			async shopList() {
				const res = await getHistory(this.queryParams)
				this.pageCount = res.total
				//停止加载中
				this.triggered = false;
				this.downRefresh = false
				//处理完逻辑停止刷新
				uni.stopPullDownRefresh();
				if (this.productList.length >= this.pageCount) {
					this.status = 'nomore';
				} else {
					let arr = [...this.productList, ...res.rows]
					this.productList = arr
					if (res.rows.length < 10) {
						this.status = 'nomore';
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: rgb(245, 245, 245);
		width: 100%;
		box-sizing: border-box;

		.box_scroll {
			height: 100%;
		}

		.box_list_noData {
			display: flex;
			flex-flow: column;
			align-items: center;

			.noData_img {
				width: 80%;
			}

			.noData_text {
				color: #B8BECA;
			}
		}

		.view {
			width: calc(100% - 60rpx);
			height: calc(100% - 60rpx);
			margin-top: 30rpx;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #fff;
			position: relative;
			top: 30rpx;
			margin: auto;
			overflow: auto;
			border-radius: 15px;

			.items {
				width: 100%;
				min-height: 140rpx;
				border-bottom: 1px solid rgba(179, 173, 173, 0.2);
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				box-sizing: border-box;
				padding: 10rpx 0;

				.header {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						font-size: 34rpx;
					}

					.red {
						width: 8rpx;
						height: 8rpx;
						background-color: red;
						border-radius: 50%;
					}

					.grey {
						width: 8rpx;
						height: 8rpx;
						background-color: rgb(179, 173, 173);
						border-radius: 50%;
					}
				}

				.bottom {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: rgb(179, 173, 173);
					margin-top: 15rpx;
				}
			}

		}
	}
</style>